<!-- Panel title -->
<div class="panel_title">
  <div>
    <h4><a href="/blog">Recent Posts</a></h4>
  </div>
</div><!-- End Panel title -->
<!-- Layout post 1 -->
<div class="row">
  {% for post in site.posts offset:4 limit:2 %}
  <div class="col col_6_of_12">
      <!-- Layout post 1 -->
      <div class="layout_post_1">
          <div class="item_thumb">
              {% if post.image %}
              <div class="thumb_icon">
                  <a href="{{ post.url }}" jQuery><i class="fa fa-copy"></i></a>
              </div>
              <div class="thumb_hover">
                  <a href="{{ post.url }}"><img src="{{ post.image }}" alt="Post"></a>
              </div>
              {% endif %}
              {% if post.video %}
              <div class="entry_media">
                <!-- Video -->
                {{ post.video }}
              </div>
              {% endif %}
              <div class="thumb_meta">
                  <span class="category" jQuery><a href="/categories/#{{ post.category }}">{{ post.category }}</a></span>
                  <span class="comments"><span class="ds-thread-count" data-thread-key="flinhong/{{ post.id }}" data-count-type="comments"></span></span>
              </div>
          </div>
          <div class="item_content">
              <h4><a href="{{ post.url }}">{{ post.title }}</a></h4>
              <p>{{ post.description }} [<a href="{{ post.url }}">Read More...</a>]</p>
          </div>
      </div><!-- End Layout post 1 -->
  </div>
  {% endfor %}
</div><!-- End Layout post 1 -->
<!-- Panel title -->
<div class="panel_title">
  <div>
    <h4><a href="/blog">More Posts</a></h4>
  </div>
</div><!-- End Panel title -->
<!-- Layout post 2 -->
<div class="row">
{% for post in site.posts offset:6 limit:4 %}
<div class="col col_12_of_12">
    <!-- Layout post 1 -->
    <div class="layout_post_2 clearfix">
        <div class="item_thumb">
            {% if post.image %}
            <div class="thumb_icon">
                <a href="{{ post.url }}" jQuery><i class="fa fa-copy"></i></a>
            </div>
            <div class="thumb_hover">
                <a href="{{ post.url }}"><img src="{{ post.image }}" alt="Post" class="visible animated"></a>
            </div>
            {% endif %}
            {% if post.video %}
            <div class="entry_media">
              <!-- Video -->
              {{ post.video }}
            </div>
            {% endif %}
            <div class="thumb_meta">
                <span class="category" jQuery><a href="/categories/#{{ post.category }}">{{ post.category }}</a></span>
                <span class="comments"><span class="ds-thread-count" data-thread-key="flinhong/{{ post.id }}" data-count-type="comments"></span></span>
            </div>
        </div>
        <div class="item_content">
            <h4><a href="{{ post.url }}">{{ post.title }}</a></h4>
            <p>{{ post.description }} [<a href="{{ post.url }}">Read More...</a>]</p>
            <div class="item_meta clearfix">
                <span class="meta_date">{{ post.date | date: "%m/%d/%Y" }}</span>
                <span class="meta_author"><a href="#">{{ site.author }}</a></span>
            </div>
        </div>
    </div><!-- End Layout post 1 -->
</div>
{% endfor %}
</div><!-- End Layout post 2 -->
